<template>
  <div class="meney">
    <div>
      <NavBar :title="title" :route="route"></NavBar>
    </div>
    <div class="boxs">

        <div>
            <div class="OrderNumber">
      No.JBDK2022020916131008255970349
    </div>
      <div class="nav1">
        <van-cell class="updatePwd">金榜登科第三中学</van-cell>
        <div class="xian"></div>
        <div class="content">
          <div class="testSite">
            <div class="left">
              <span class="conmon dian">考&#12288;&#12288;点</span>
              <span>廊坊市广阳区考点</span>
            </div>
            <span class="right">100.0元</span>
          </div>
          <div class="major">
            <span class="conmon">考试专业</span>
            <span>音乐</span>
          </div>
        </div>
                <div class="content">
          <div class="testSite">
            <div class="left">
              <span class="conmon dian">考&#12288;&#12288;点</span>
              <span>廊坊市广阳区考点</span>
            </div>
            <span class="right">100.0元</span>
          </div>
          <div class="major">
            <span class="conmon">考试专业</span>
            <span>美术</span>
          </div>
        </div>
        <div class="xian"></div>

        <div class="total">
          <span>共2个专业 合计：200元</span>
          <div class="total_pay">
            <span style="margin-top:3px;margin-right:5px;color:rgba(255, 0, 0, 1);">29:59</span>
            <van-button type="default" class="btnPay" @click="payments">支付</van-button>
          </div>
        </div>

      </div>
    </div>
    </div>
  

  </div>
</template>

<script>
    import NavBar from '@/components/navBar.vue'

    export default {
        components: {
            NavBar,
        },
        data() {
            return {
                // 标题  路由
                title: '支付',
                route: '/RegistrationDetails',
            }
        },
        methods: {
            // 支付按钮
            payments() {
                this.$router.push({path: '/payment'})
            }
        }

    }
</script>

<style scoped>
.meney{
  height: 100%;
  background-color: #f7f7f7;
}
  .OrderNumber{
    color: rgba(65, 110, 160, 1);
    font-size: 12px;
  	text-align: left;
    margin-left: 5px;
    /* background-color: #Fff; */
  }
  .updatePwd::before{
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background: url('../../assets/logea.png');
    background-size: contain;
    margin-right: 5px;
  }
  .xian{
    border-top: 1px solid rgba(229, 229, 229, 1);
  }
  .content{
    padding: 0 5px;
    margin-top: 10px;
    
  }
  .content .testSite{
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;

  }
  .updatePwd{
    margin-left: -15px;
  } 
  .conmon{
    margin-right: 20px;
  }
  .major{
    margin: 10px 0 15px;
  }
  .total{
    padding: 0 10px;
    margin-top: 15px;
  }
  .total_pay{
    display: flex;
    justify-content: flex-end;
  }
  .btnPay{
    background-color: rgba(42, 130, 228, 1);
    color: #Fff;
    border-radius: 8px;
    height: 24px;
  }
  .boxs{
    margin-left: 15px;
    margin-right: 15px;
    background-color: #fff;
  }
  .van-cell{
    background-color: transparent;
  }
</style>
